<template>
	<el-input
		type="text"
		ref="formImg"
		:class="url && type == 'image' ? 'diygw-img-input' : ''"
		v-model="url"
		clearable
		:placeholder="'请选择' + title"
	>
		<template #append>
			<el-image
				:src="url"
				v-if="url && type == 'image'"
				style="width: 30px; height: 30px"
				:preview-teleported="true"
				:preview-src-list="[url]"
			></el-image>
			<el-button @click="handleStorage"> 选择{{ title }} </el-button>
		</template>
	</el-input>
	<diy-storage ref="storage" :type="type" :local="local" :accept="accept" :limit="1" @confirm="getAttachmentFileList"></diy-storage>
</template>

<script lang="ts" setup>
import { nextTick, ref, defineEmits, watch } from 'vue';
import { useVModel } from '@vueuse/core';
import DiyStorage from './storage.vue';

const props = defineProps({
	// 外部v-model值
	modelValue: {
		type: String,
		default: '',
	},
	title: {
		type: String,
		default: '',
	},
	type: {
		type: String,
		default: 'image',
	},
	accept: {
		type: String,
		default: 'image/*',
	},
	local: {
		type: String,
		default: '0',
	},
});

const storage = ref(null);

const emit = defineEmits(['update:modelValue', 'change', 'blur']);

const url = useVModel(props, 'modelValue', emit);

const handleStorage = () => {
	nextTick(() => {
		storage.value!.handleStorageDlg('', '上传' + props.title);
	});
};
watch(url, () => {
	emit('change');
	emit('blur');
});
const formImg: EmptyObjectType = ref(null);
// 获取商品相册资源
const getAttachmentFileList = (files = <any>[]) => {
	if (!files.length) {
		return;
	}
	if (props.local == '1') {
		url.value = files[0].path;
	} else {
		url.value = files[0].url;
	}
	nextTick(() => {
		formImg.value?.input.focus();
		formImg.value?.input.blur();
	});
};
</script>

<style lang="scss" scoped>
.diygw-img-input ::v-deep(.el-input-group__append) {
	padding-left: 0px;
}
.diygw-img-input {
	::v-deep(.el-image) {
		margin-right: 15px;
	}
}
.sortable-ghost {
	opacity: 0;
}
</style>
